import React, { Component } from 'react'
import BlogCard from '@/components/viewWidget/BlogCard'
import { getContext } from '@/context/common/applicationContext'
import { Spin, Pagination, message } from 'antd'
import { ConfigProvider } from 'antd';
import zh_CN from 'antd/es/locale/zh_CN';
import { get } from '@/utils/requestUtil.js'
import RankCard from '@/components/viewWidget/RankCard';

import './index.less'
import ReturnTop from '@/components/viewWidget/ReturnTop';
import { Link } from 'react-router-dom';
import { commonQueryByCode } from '@/service/document/documentService';

class MainPage extends Component {

    constructor(props) {
        super(props)
        this.state = {
            loading: true,
            page: 1, //当前页数
            total: 0, //数据总数
            pageSize: 10, //每页条数
            blogList: [],
            recomendList: [] //推荐列表
        }
    }

    //查询博客信息
    searchBlog = async () => {
        const { page, pageSize } = this.state
        const response = await get(`/blog/get/newList/${page}/${pageSize}`)
        if (response && response.data) {
            await new Promise(resolve => {
                this.setState({
                    total: response.data.total,
                    blogList: response.data.blogs
                }, resolve)
            })
        } else {
            message.warning('博客信息获取失败！')
        }
    }

    async componentDidMount() {
        await this.searchBlog() //初始化博客数据
        //查询推荐信息
        let recomendList = []
        const response = await commonQueryByCode({
            commandCode: 'searchRecommendBlog'
        })
        if (response && response.code === 200) {
            recomendList = response.data.documents.map(item => { return item.content })
        }
        await new Promise(resolve => { this.setState({ recomendList }, resolve) })
        await new Promise(resolve => { this.setState({ loading: false }, resolve) })
    }

    render() {
        if (this.state.loading === true) return <Spin />
        return (
            <div className='main-page-main'>
                <div className='main-page-body'>
                    <div className='main-page-body-left'>
                        <Link to='/jms/crawl'>
                            <img src='/ads/jmscrawl.jpg' alt='数据爬取平台' />
                        </Link>
                    </div>
                    <div className='main-page-body-mid'>
                        <div className='card'>
                            {
                                this.state.page === 1 && this.state.recomendList.length > 0 ?
                                    <div className="recommend-container">
                                        <h2 className="recommend-title">小编推荐</h2>
                                        <ul className="recommend-list">
                                            {
                                                this.state.recomendList.map(item => {
                                                    return (
                                                        <li key={item.id}><Link to={`/${this.props.user.id}/blog/${item.id}`} key={item.id}>{`【${item.authorName}】 ${item.blogTitle}`}</Link></li>
                                                    )
                                                })
                                            }
                                        </ul>
                                    </div> : ''
                            }
                            {
                                this.state.blogList.map(item => {
                                    return (
                                        <BlogCard
                                            key={item.id}
                                            style={{ marginBottom: '10px' }}
                                            user={this.props.user}
                                            blog={item}
                                        ></BlogCard>
                                    )
                                })
                            }
                            <div className='main-page-mid-pagination'>
                                <ConfigProvider locale={zh_CN}>
                                    <Pagination
                                        style={{ width: 'fit-content' }}
                                        current={this.state.page}
                                        total={this.state.total}
                                        pageSize={this.state.pageSize}
                                        onChange={async (page, pageSize) => {
                                            await new Promise(resolve => {
                                                this.setState({
                                                    page,
                                                    pageSize
                                                }, resolve)
                                            })
                                            //切换页面后要重新查询数据
                                            await this.searchBlog()
                                            //返回顶部
                                            document.documentElement.scrollTop = 0
                                            document.body.scrollTop = 0
                                        }}
                                    />
                                </ConfigProvider>
                            </div>
                        </div>
                    </div>
                    <div className='main-page-body-right'>
                        <div className='main-page-body-right-item'>
                            <RankCard
                                commandCode='getBlogsOrderByViews'
                                title='博客浏览量排行榜'
                            ></RankCard>
                        </div>
                        <div className='main-page-body-right-item'>
                            <RankCard
                                commandCode='getBlogsOrderByAgree'
                                title='博客点赞排行榜'
                            ></RankCard>
                        </div>
                        <div className='main-page-body-right-item'>
                            <RankCard
                                commandCode='getBlogsOrderByRemarks'
                                title='博客评论排行榜'
                            ></RankCard>
                        </div>
                        <div className='main-page-body-right-item'>
                            <RankCard
                                commandCode='getBlogsOrderByCollection'
                                title='博客收藏排行榜'
                            ></RankCard>
                        </div>
                    </div>
                </div>
                <div className='main-page-footer'>
                    <div className="footer-item">
                        Copyright © 2024 jmsBlog 金木三博客
                    </div>
                    <div className="footer-item">
                        致力于分享个人见解、经验和观点。我们欢迎各位读者的到来，希望您能在本站找到有价值的信息
                    </div>
                    <div className="footer-item">
                        联系方式：wjdms@outlook.com
                    </div>
                </div>
                <ReturnTop />
            </div>
        )
    }
}
export default getContext(MainPage)
